{extend name="Layout/base" /}
{block name="content"}
<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">


    <!-- Start Row -->
    <div class="row">

        <!-- Start Panel -->
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-title">
                    Default Table
                </div>
                <div class="panel-body table-responsive">
                    <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>

                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <td class="text-center"><i class="fa fa-trash"></i></td>
                                <td>Order ID</td>
                                <td>Product</td>
                                <td>Buyer</td>
                                <td>Date</td>
                                <td>Order Note</td>
                                <td>Payment</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><div class="checkbox margin-t-0"><input id="checkbox1" type="checkbox"><label for="checkbox1"></label></div></td>
                                <td># <b>9652</b></td>
                                <td>Kode Gaming Laptop</td>
                                <td>John Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size. <br>Finally it shrank to the size of a marble, the most beautiful you can imagine.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td class="text-center"><div class="checkbox margin-t-0"><input id="checkbox2" type="checkbox"><label for="checkbox2"></label></div></td>
                                <td># <b>1963</b></td>
                                <td>New Season Jacket</td>
                                <td>Jane Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size. <br>Finally it shrank to the size of a marble, the most beautiful you can imagine.</td>
                                <td>Paypal</td>
                            </tr>
                            <tr>
                                <td class="text-center"><div class="checkbox margin-t-0"><input id="checkbox3" type="checkbox"><label for="checkbox3"></label></div></td>
                                <td># <b>9652</b></td>
                                <td>IO Mouse</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size. <br>Finally it shrank to the size of a marble, the most beautiful you can imagine.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td class="text-center"><div class="checkbox margin-t-0"><input id="checkbox4" type="checkbox"><label for="checkbox4"></label></div></td>
                                <td># <b>9651</b></td>
                                <td>Doe Bike</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size. <br>Finally it shrank to the size of a marble, the most beautiful you can imagine.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td class="text-center"><div class="checkbox margin-t-0"><input id="checkbox5" type="checkbox"><label for="checkbox5"></label></div></td>
                                <td># <b>6962</b></td>
                                <td>Zets Baseball Bat</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size. <br>Finally it shrank to the size of a marble, the most beautiful you can imagine.</td>
                                <td>Credit Card</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- End Panel -->

        <!-- Start Panel -->
        <div class="col-md-12">
            <div class="panel panel-default">

                <div class="panel-title">
                    Striped rows
                </div>

                <div class="panel-body table-responsive">
                    <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>

                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <td>Order ID</td>
                                <td>Product</td>
                                <td>Buyer</td>
                                <td>Date</td>
                                <td>Order Note</td>
                                <td>Payment</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td># <b>9652</b></td>
                                <td>Kode Gaming Laptop</td>
                                <td>John Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>1963</b></td>
                                <td>New Season Jacket</td>
                                <td>Jane Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Paypal</td>
                            </tr>
                            <tr>
                                <td># <b>9652</b></td>
                                <td>IO Mouse</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>9651</b></td>
                                <td>Doe Bike</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>6962</b></td>
                                <td>Zets Baseball Bat</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- End Panel -->


        <!-- Start Panel -->
        <div class="col-md-12">
            <div class="panel panel-default">

                <div class="panel-title">
                    Bordered table
                </div>

                <div class="panel-body">
                    <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>

                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <td>Order ID</td>
                                <td>Product</td>
                                <td>Buyer</td>
                                <td>Date</td>
                                <td>Order Note</td>
                                <td>Payment</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td># <b>9652</b></td>
                                <td>Kode Gaming Laptop</td>
                                <td>John Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>1963</b></td>
                                <td>New Season Jacket</td>
                                <td>Jane Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Paypal</td>
                            </tr>
                            <tr>
                                <td># <b>9652</b></td>
                                <td>IO Mouse</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>9651</b></td>
                                <td>Doe Bike</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr>
                                <td># <b>6962</b></td>
                                <td>Zets Baseball Bat</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- End Panel -->

        <!-- Start Panel -->
        <div class="col-md-12">
            <div class="panel panel-default">

                <div class="panel-title">
                    Contextual classes
                </div>

                <div class="panel-body">
                    <p>Use contextual classes to color table rows or individual cells.</p>
                    <table class="table table-bordered table-striped">
                        <colgroup>
                            <col class="col-xs-1">
                            <col class="col-xs-7">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Class</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">
                                    <code>.active</code>
                                </th>
                                <td>Applies the hover color to a particular row or cell</td>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <code>.success</code>
                                </th>
                                <td>Indicates a successful or positive action</td>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <code>.info</code>
                                </th>
                                <td>Indicates a neutral informative change or action</td>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <code>.warning</code>
                                </th>
                                <td>Indicates a warning that might need attention</td>
                            </tr>
                            <tr>
                                <th scope="row">
                                    <code>.danger</code>
                                </th>
                                <td>Indicates a dangerous or potentially negative action</td>
                            </tr>
                        </tbody>
                    </table>

                    <br>

                    <table class="table">
                        <thead>
                            <tr>
                                <td>Order ID</td>
                                <td>Product</td>
                                <td>Buyer</td>
                                <td>Date</td>
                                <td>Order Note</td>
                                <td>Payment</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="active">
                                <td># <b>9652</b></td>
                                <td >Kode Gaming Laptop</td>
                                <td>John Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr class="success">
                                <td># <b>1963</b></td>
                                <td>New Season Jacket</td>
                                <td>Jane Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Paypal</td>
                            </tr>
                            <tr class="warning">
                                <td># <b>9652</b></td>
                                <td>IO Mouse</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr class="danger">
                                <td># <b>9651</b></td>
                                <td>Doe Bike</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                            <tr class="info">
                                <td># <b>6962</b></td>
                                <td>Zets Baseball Bat</td>
                                <td>Jonathan Doe</td>
                                <td>12/10/2015</td>
                                <td>As we got further and further away, it [the Earth] diminished in size.</td>
                                <td>Credit Card</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- End Panel -->







    </div>
    <!-- End Row -->






</div>
<!-- END CONTAINER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
{/block}